<template>
 <div>
      <div class="history-header">
      <div class="left">
        <span v-for="(item,index) in headerList" :key="item.id">
          <p :class="curentIndex===index?  'active-p' :''" @click.stop="checkTitle(index)">{{item.title}}</p>
        </span>

      </div>

    </div>
    <div class="recommend">
      <HotListItem  v-for="(item,index) in list" :key="item.video_id" :data="item" :Index="index" :sortState='false'></HotListItem>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import HotListItem from '@/components/video/hotListItem.vue'
import http from '@/util/http'

export default {
  props: {
    HotListItem
  },
  data () {
    return {
      list: [],
      page: 1,
      curentIndex: 0,
      headerList: [
        {
          id: 1,
          title: '最新'
        },
        {
          id: 2,
          title: '热门'
        }
      ], // 头部列表
      sort: 'new'
    }
  },
  computed: {
    ...mapState(['serach', 'user'])
  },
  mounted () {
    console.log(this.serach)
    this.getData()
  },
  methods: {
    // 切换评论内容
    checkTitle (index) {
      this.curentIndex = index
      if (index === 0) {
        this.page = 1
        this.sort = 'new'
        this.getData()
      } else if (index === 1) {
        this.page = 1
        this.sort = 'hot'
        this.getData()
      }
    },
    // 获取数据
    getData () {
      http.getVideolist(this.serach, this.page, this.sort).then(res => {
        this.list = res.data.videoList
        console.log(res.data)
      })
    }
  }
}
</script>

<style lang="scss" scoped >
.recommend {
  display: flex;
  justify-content: space-between;
  height: auto;
  flex-wrap: wrap;

}
 .history-header {
    width: 100%;
    height: 30px;
    line-height: 30px;
    font-size: 14px;
    display: flex;
    background: white;
    padding: 6px 0;
    justify-content: space-between;
    border-radius: 5px;
    margin-bottom: 10px;
    .left {
      color: #666;
      span {
        cursor: pointer;
        padding: 0 10px;
        width: 40px;
        display: inline-block;
        padding: 0 5px;
        text-align: center;
        .active-p {
          font-weight: 700;
          color: #f60;
        }
        p {

          &:hover {
            color: #f60;

          }
        }
      }
      .active {
        color: #f60;
        font-weight: 700;
      }
    }

  }
</style>
